<template>
	<div class="cpn-wrapper">
		<component :key="cpnKey" :is="cmptConfig(cpnInfo.componentName)" v-bind="cpnInfo"></component>
	</div>
</template>
<script setup>
import { cmptConfig } from "@/utils/LowCode/componentConfig";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
const props = defineProps({
	cpnInfo: {
		type: Object,
		default: () => {},
	},
});
const { cpnInfo } = toRefs(props)
// diff(wh发生变化组件刷新)
const cpnKey = computed(() => {
	return cpnInfo.value.id + cpnInfo.value.canvas.wh.w + cpnInfo.value.canvas.wh.h
})
onMounted(() => {
	console.log('cpnInfo', props.cpnInfo);
	
})
</script>
<style scoped lang="scss">
.cpn-wrapper {
	width: 100%;
	height: 100%;
}
</style>
